<template>
  <el-dialog
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    destroy-on-close
    title="模型配置列表"
    :visible.sync="visible"
    width="70%"
    custom-class="crud-dialog"
    :before-close="handleClose"
    append-to-body
    center
  >
    <avue-crud
      ref="crud"
      class="crud-table"
      :option="moduleListOption"
      :data="areaWarnModelList"
      :header-cell-class-name="() => 'crud-table-head'"
      :cell-class-name="() => 'crud-cell'"
    >
      <template #menuLeft>
        <el-button type="primary" icon="el-icon-plus" @click="handleAddAreaWarnModule">添加告警模型</el-button>
      </template>
      <template #menu="{ row, index }">
        <el-button v-show="row.id && !row.isEdit" type="text" @click="handleEdit(row, index)">编辑</el-button>
        <el-button v-show="row.id && !row.isEdit" type="text" @click="handleDelete(row, index)">删除</el-button>
      </template>
    </avue-crud>
    <WarnModelDialog
      ref="modelConfig"
      :modelArr="modelArr"
      :shipTypeArr="shipTypeArr"
      :areaInfo="areaInfo"
      @handleRefresh="handleRefresh"
    ></WarnModelDialog>
  </el-dialog>
</template>

<script>
import { modelListOption } from './modelListOption'
import WarnModelDialog from './WarnModelDialog'

import { getWarnModelList, deleteAreaModel } from '@/api/channelArea'
import { getDict } from '@/api/shipList'
export default {
  props: {
    modelArr: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
    WarnModelDialog
  },
  data() {
    return {
      areaInfo: {},
      loading: false,
      visible: false,
      areaWarnModelList: [],
      shipTypeArr: []
      // 区域告警模型字典
      // modelArr: [
      //   { label: '区域限速', value: 'QYXS' },
      //   { label: '未按规定锚泊', value: 'WANGDMB' },
      //   { label: '闯入特殊区域', value: 'CRTSQY' }
      // ]
    }
  },
  computed: {
    moduleListOption() {
      return modelListOption.call(this)
    }
  },
  methods: {
    show(row) {
      if (row) {
        this.areaInfo = {
          id: row.id,
          type: row.type
        }
        this.init()
        this.visible = true
      }
    },
    init() {
      Promise.all([this.queryAreaModelList(), this.getShipArr()])
        .then(() => {
          this.loading = false
        })
        .catch((err) => {})
    },
    async queryAreaModelList() {
      const { result } = await getWarnModelList({ areaId: this.areaInfo.id })
      this.areaWarnModelList = result
      if (result && result.length > 0) {
        this.areaWarnModelList = result.map((item, index) => {
          const configJson = item?.configJson && item?.configJson.length > 0 ? JSON.parse(item.configJson) : {}

          return {
            ...item,
            configJson,
            ...configJson
          }
        })
      }
    },
    // 船舶类型
    async getShipArr() {
      let { result } = await getDict('ship_large_type')
      if (result && result.length > 0) {
        this.shipTypeArr = result //result.filter((item) => item.value.substring(item.value.length - 2) == '00') // 船舶类型只取大类
      }
    },
    // 添加告警模型
    handleAddAreaWarnModule() {
      this.$refs.modelConfig.show()
    },
    // 编辑告警模型
    handleEdit(value, index) {
      this.$refs.modelConfig.show(value)
    },
    // 删除
    handleDelete(value, index) {
      this.$confirm('是否确认删除该条数据?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'btn-custom-cancel',
        customClass: 'custom-message-box',
        type: 'warning'
      }).then(async () => {
        await deleteAreaModel(value.id)
        this.$message.success(`删除成功`)
        //this.init()
        this.queryAreaModelList()
      })
    },
    handleRefresh() {
      //this.init()
      this.queryAreaModelList()
    },
    handleClose() {
      this.areaInfo = {}
      this.areaWarnModelList = []
      this.visible = false
    }
  }
}
</script>

<style scoped lang="scss">
.deploy-detail {
  .module-content {
    position: relative;

    .module-btn {
      position: absolute;
      top: -5px;
      left: 155px;
    }
  }

  .model-message {
    // height: 395px;

    ::v-deep .el-collapse-item__header {
      border-bottom: 1px solid #ebeef5;
      height: 55px;
      margin: 15px 0;
      align-items: flex-start;

      .el-icon-arrow-right:before {
        content: '模型参数配置\e6e0';
      }
      .el-collapse-item__arrow {
        margin: 10px 8px 0 auto;
      }
      .el-collapse-item__arrow.is-active {
        transform: none;

        &:before {
          content: '模型参数配置\e6df';
        }
      }
    }

    .model-form {
      padding: 2px;

      .model-title {
        position: relative;
        font-size: 18px;
        color: #333;
        padding-left: 18px;
        display: flex;
        align-items: center;

        &:before {
          content: '';
          display: block;
          width: 6px;
          height: 20px;
          position: absolute;
          left: 0;
          top: 5px;
          background-color: var(--theme);
        }
      }
    }
  }
}
</style>
